<template>
  <div>
    <div ref="echarts" style="width: 600px; height: 400px;"></div>
    <button type="button" @click="testMock">点击</button>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
  name: 'EChartsComponent',
  data () {
    return {
      myChart: undefined
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.echarts)
    this.myChart.setOption({
      title: {
        // 主标题
        text: "表格主要标题",
        // 位置相关参数
        left: "center",
        top: "center",
        show: true,
        // 背景色
        backgroundColor: "rgba(255, 255, 0, 0.1)",
        // 点击跳转
        link: "https://echarts.apache.org/zh/option.html#title",
        target: 'blank',
        textStyle: {
          fontSize: 20,
          color: "rgba(0, 0, 200, 1)",
          fontStyle: "normal",
          fontWeight: "bold",
          lineHeight: 13,
          width: 200,
          height: 20,
          textBorderType: "dashed",
          textShadowColor: "rgba(0, 0, 0, 1)"
        },
        // 副标题
        subtext: "Sub Title",
        sublink: "https://echarts.apache.org/zh/option.html#title",
        subtarget: 'blank',
        subtextStyle: {
          fontSize: 20,
          color: "rgba(255, 0, 0, 1)",
          fontStyle: "normal",
          fontWeight: "normal",
          lineHeight: 13,
          width: 200,
          height: 20,
          textBorderType: "dashed",
          textShadowColor: "rgba(0, 0, 0, 1)"
        }
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '储量',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    })
  },
  methods: {
    testMock () {
      axios.get('/mock/echarts1').then(response => {
        this.myChart.setOption({
          series: [
            {
              name: '储量',
              type: 'line',
              data: response.data.data.items
            }
          ]
        })
        console.log('response', response.data.data.items)
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
